<template>
  <div class="app-container ">
      <div class="customerAnalysisInfo-div">
          <div class="top-name">
            <span>{{info.customerName}}</span>
            <span class="top-lable">{{info.customerLabel}}</span>
          </div>
          <div class="guanlian">关联公司：
            <span v-for="item in info.relationCustomers">{{item.customerName}}</span>
          </div>
          <div class="guanlian">
            <span>首次合同时间：{{info.firstOrderTime}}</span>
            <span>最近合同时间：{{info.lastOrderTime}}</span>
            <span>{{info.noOrderTip}}</span>
          </div>
      </div>

      <el-card shadow="never" style="margin-top:20px">
        <el-form :inline="true" size="mini" label-width="90px">
          <el-form-item label-width="0">
            <el-radio-group v-model="radio1" @change="changeRadio">
              <el-radio-button label="today">今天</el-radio-button>
              <el-radio-button label="yesterday">昨天</el-radio-button>
              <el-radio-button label="7Day">最近7天</el-radio-button>
              <el-radio-button label="30Day">最近30天</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="时间段：">
            <el-date-picker
                    @change="changeTime"
                    v-model="createTime"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="fenxi-row">
          <div class="fenxi-col">
            <div class="num">{{chartsData.ordGoodsNumSum}}吨</div>
            <div class="name">数量</div>
          </div>
          <div class="fenxi-col">
            <div class="num">{{chartsData.ordGoodsAmountSum}}</div>
            <div class="name">金额</div>
          </div>
          <div class="fenxi-col">
            <div class="num">{{chartsData.ordNumSum}}</div>
            <div class="name">次数</div>
          </div>
          <div class="fenxi-col">
            <div class="num">{{chartsData.ordGoodsPerNum}}</div>
            <div class="name">平均购买</div>
          </div>
          <div class="fenxi-col">
            <div class="num">{{chartsData.priceUpNum}}</div>
            <div class="name">紧俏</div>
          </div>
          <div class="fenxi-col">
            <div class="num">{{chartsData.priceStableNum}}</div>
            <div class="name">平稳</div>
          </div>
          <div class="fenxi-col">
            <div class="num">{{chartsData.priceDownNum}}</div>
            <div class="name">滞销</div>
          </div>
        </div>
        <div id="myChart" :style="{'height':'300px'}" v-loading="loadingChart"></div>

        <el-table
                v-loading="loading"
                :data="list"
                border
                style="width: 100%; margin-top: 20px">
          <el-table-column
                  prop="analysisTime"
                  label="日期"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="ordGoodsNum"
                  label="合同数量"
                  align="center">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="orderAmount"
                  label="合同金额">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="orderNum"
                  label="购买次数">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="ordGoodsPerNum"
                  label="平均购买量">
          </el-table-column>
          <el-table-column
                  prop="priceUpNum"
                  label="紧俏"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="priceStableNum"
                  label="平稳"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="priceDownNum"
                  label="滞销"
                  align="center">
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  layout="total, sizes,prev, pager, next,jumper"
                  :current-page.sync="pageNum"
                  :page-size="pageSize"
                  :page-sizes="[10,15,20]"
                  :total="count">
          </el-pagination>
        </div>
      </el-card>



  </div>
</template>

<script>
    import { analysisCustomerInfo,customerOrderSummary,analysisOrderSummaryByPage} from '@/api/partner'
    import {goodsList} from '@/api/company'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    import {validateCommission} from '@/utils/validate';

    export default {
        name: "goodsAnalysis",
        data(){
          return {
            radio1:'30Day',
            createTime:[],
            loadingChart:false,
            customerId:this.$route.query.customerId,
            info:{},
            chartsData:{},
            pageNum:1,
            pageSize:10,
            count:0,
            loading:false,
            list:[],
          }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),
        },
        created() {
            this.getInfo();
            this.changeRadio();
        },
        filters: {

        },
        methods: {
          changeRadio() {
            let time = new Date();
            let day = time - time % (24 * 60 * 60 * 1000) - 8 * 60 * 60 * 1000;
            let end = new Date(day + 24 * 60 * 60 * 1000-1000);
            let start;
            if(this.radio1 == 'today'){
              start = end;
            }else if(this.radio1 == 'yesterday'){
              start = new Date(day - 1*24 * 60 * 60 * 1000);
            }else if(this.radio1 == '7Day'){
              start = new Date(day - 7*24 * 60 * 60 * 1000);
            }else if(this.radio1 == '30Day'){
              start = new Date(day - 30*24 * 60 * 60 * 1000);
            }
            let endDate = formatDate(end, 'yyyy-MM-dd');
            let startDate = formatDate(start, 'yyyy-MM-dd');
            this.createTime = [startDate,endDate];
            this.handleSearchList()
          },
          changeTime(){
            this.radio1 = '';
            this.handleSearchList()
          },
          getInfo() {
            analysisCustomerInfo({customerId: this.customerId}).then((res) => {
              this.info = res;
            })
          },

          getCharts() {
            customerOrderSummary({customerId: this.customerId, createTime: this.createTime}).then((res) => {
              this.chartsData = res;
              this.drawCaiGouCount(res.timeList,res.goodsNumList,res.orderCountList);
            })
          },

          getListData() {
            this.loading = true;
            analysisOrderSummaryByPage({customerId: this.customerId, createTime: this.createTime,pageNum:this.pageNum,pageSize:this.pageSize}).then((res) => {
              this.list = res.list;
              this.count = res.total;
              this.title = res.title;
              this.loading = false;
            }).catch(()=>{
              this.loading = false;
            })
          },
          handleSearchList(){
            this.pageNum = 1;
            this.getCharts();
            this.getListData();
          },

          handleSizeChange(val){
            this.pageNum = 1;
            this.pageSize = val;
            this.getListData();
          },
          handleCurrentChange(val){
            this.pageNum = val;
            this.getListData();
          },
          //画图表
          drawCaiGouCount(x,y1,y2){
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            // 绘制图表
            myChart.setOption({
              dataZoom: [{
                show: true,
              }, {
                type: 'inside'
              }],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              legend: {
                data: ['购买量', '次数']
              },
              xAxis: [
                {
                  type: 'category',
                  data: x,
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '价格',
                  scale:true
                },
              ],
              series: [
                {
                  name: '购买量',
                  type: 'line',
                  smooth: true,
                  data: y1,
                  symbolSize: 10,   //设定实心点的大小
                  itemStyle: {
                    normal: {
                      //定义一个list，通过list获取颜色，
                      color: '#c71010'
                    }
                  },
                  areaStyle: {}
                },
                {
                  name: '次数',
                  type: 'line',
                  smooth: true,
                  symbolSize: 10,   //设定实心点的大小
                  data: y2,
                  itemStyle: {
                    normal: {
                      //定义一个list，通过list获取颜色，
                      color: '#1d9b00'
                    }
                  },
                  areaStyle: {}
                },
              ]
            });
            this.loadingChart = false;
          },
        }
    }
</script>

<style scoped lang="scss">
    .customerAnalysisInfo-div{
      padding:10px;
      .top-name{
        font-size:24px;
        .top-lable{
          display: inline-block;
          margin-left:15px;
          font-size: 12px;
          vertical-align: middle;
          color: #409eff;
          background: #ecf5ff;
          border: 1px solid #b3d8ff;
          height: 24px;
          line-height: 24px;
          padding: 0 10px;
          border-radius: 5px;
        }
      }
      .guanlian{
        font-size:14px;
        line-height: 22px;
        margin-top:10px;
        span{
          display: inline-block;
          margin-right:20px
        }
      }
    }
    .fenxi-row{
      overflow: hidden;
      .fenxi-col{
        display: inline-block;
        width:140px;
        text-align: center;
        padding:20px 0 30px 0;
        .name{
          font-size:12px;
        }
        .num{
          font-size:18px;
          font-weight: bold;
          margin-bottom:5px;
        }
      }
    }
</style>
